<template>
    <div>
        <basic-container>
            <!-- table列表 -->
            <el-table
                :data="tableData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
            >
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="离职成员" align="center" prop="employee"></el-table-column>
                <el-table-column label="接替人员" align="center" prop="transferEmployee"></el-table-column>
                <el-table-column label="客户信息" align="center" prop="customerInfo"></el-table-column>
                <el-table-column label="状态" align="center" prop="status"></el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <div class="madp-transfer" v-if="permissions.cp_resignation_inheritance_add">
                <el-button type="primary" @click="addInherit">新增继承</el-button>
            </div>
        </basic-container>
    </div>
</template>
<script>
import { queryAllResignEmployees } from '@/api/customer/resignation-inheritance';
import { mapGetters } from 'vuex';
export default {
    props: [],
    data() {
        return {
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            }
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    mounted() {
        this.getAllResignEmployeeList();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        // 获取表格数据
        getAllResignEmployeeList() {
            let params = {
                current: this.page.current,
                size: this.page.pageSize
            };
            queryAllResignEmployees(params).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        // 新增继承
        addInherit() {
            this.$router.push({ path: '/resigned-employee' });
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getAllResignEmployeeList(this.page);
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            this.getAllResignEmployeeList(this.page);
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
.madp-transfer {
    margin-top: 80px;
    text-align: center;
}
</style>
